<template>
  <view class="content">
    <view>
      <uni-calendar ref="calendar" :lunar="true" :insert="true" :selected="recordList" @monthSwitch="mouthSwitch" />
    </view>
    <view>
      <view v-for="(dateInfo,i) in recordList" :key="i">
        <uni-section :title="dateInfo.date" type="line"></uni-section>
        <uni-list>
          <uni-list-item
            v-for="(record,recordIndex) in dateInfo.data"
            :key="recordIndex"
            :title="record.operationType === 0?'学习啦~':'玩耍啦~'"
            :note="(record.operationType === 0?'获取':'使用') + record.points + (record.registType == 0?'玻璃币':'玉币')"
            :show-extra-icon="true"
            :clickable="true"
            :extra-icon="record.operationType === 0?studyIconObject:playIconObject"
            :right-text="record.registDuration+'分钟'"
            @click="showDialog(record)"
          ></uni-list-item>
        </uni-list>
      </view>
    </view>
    <uni-popup ref="recordDialog" type="dialog" style="z-index:999">
      <view class="record-info">
        <view class="record-title" :style="dialogParam.titleStyle">{{dialogParam.title}}</view>
        <view class="record-content">
          <view class="record-content-item">备注：{{dialogParam.remark}}</view>
          <view class="record-content-item">时长：{{dialogParam.registDuration}}m</view>
          <view
            class="record-content-item"
          >{{ (dialogParam.operationType === 0?'获取：':'花费：')+dialogParam.registDuration+(dialogParam.registType == 0?'玻璃币':'玉币')}}</view>
          <view class="record-content-item" v-if="dialogParam.operationType === 0">登记人：{{dialogParam.registerName}}</view>
          <view class="record-content-item">登记时间：{{parseTime(dialogParam.registTime)}}</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { apiQueryByMonth } from '@/api/pointRegist.js'

export default {
  data() {
    return {
      studyIconObject: { color: '#91ca8c', size: '23', type: 'checkbox' },
      playIconObject: { color: '#ffce7b', size: '23', type: 'info' },
      recordList: [],
      dialogParam: {
        titleStyle: '',
        title: ''
      }
    }
  },
  onLoad() {
    var myDate = new Date()
    var tYear = myDate.getFullYear()
    var tMonth = myDate.getMonth() + 1
    this.getRecords(tYear, tMonth)
  },
  methods: {
    getRecords(year, month) {
      uni.showLoading({ title: '加载中...' })
      const paramObj = {
        year: year,
        month: month
      }
      apiQueryByMonth(paramObj)
        .then(res => {
          this.recordList = res
          uni.hideLoading()
        })
        .catch(err => {
          uni.hideLoading()
          uni.showToast({
            title: err,
            icon: 'error',
            duration: 1500
          })
        })
    },
    mouthSwitch({ year, month }) {
      this.getRecords(year, month)
    },
    showDialog(record) {
      this.dialogParam = {
        titleStyle: { color: record.operationType === 0 ? '#67BF5F' : '#E9B050' },
        title: record.operationType === 0 ? '学习登记' : '娱乐登记',
        ...record
      }
      this.$refs.recordDialog.open()
    },
    parseTime(dateStr) {
      if (dateStr) {
        return dateStr.replace('T', ' ')
      } else {
        return ''
      }
    }
  }
}
</script>

<style>
.hello {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.record-info {
  background-color: #fff;
  width: 80vw;
  border-radius: 5px;
}
.record-title {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  padding: 15px 10vw 10px;
}
.record-content {
  font-size: 14px;
  padding: 0 10vw 15px;
}
.record-content-item {
  padding: 5px 0;
}
</style>
